<template>
  <!-- 头部组件 -->
  <header>
    <div class="banxin tanxin header_in">
      <section>欢迎来到积分商城</section>
      <ul>
        <li class="avatar_li">
          <img class="avatar" width="26" :src="userInfo.headImg" alt="" />
          用户名：{{ userInfo.nickName }}
        </li>
        <li>我的积分：{{ userInfo.coin }}</li>
        <li>获取积分</li>
        <li>商城官网</li>
        <li v-if="isLogin" class="header_btn car_btn">
          <img src="../assets/images/Shopping.png" alt="" />
          <span>购物车</span>
          <b>{{ cartTotal }}</b>
        </li>
        <li v-else class="header_btn login_btn" @click="gologin">登录</li>
      </ul>
    </div>
  </header>
</template>

<script>
import { WeixinLonginApi, UserInfoApi } from "@/request/api";
export default {
  data() {
    return {
      // 判断是否登录
      isLogin: false,
      userInfo: {
        // 头像
        headImg: require("../assets/images/userImg.png"),
        // 用户名
        nickName: "游客",
        // 鸡腿数
        coin: "--",
      },
      // 购物车数量
      cartTotal: this.$store.state.cartNum,
    };
  },
  methods: {
    gologin() {
      this.$store.commit("changeOpenLogin", true);
    },
  },
  created() {
    // 获取地址栏上的code
    let code = this.$route.query.code;
    // 如果有code就用微信扫码登录接口
    if (code) {
      WeixinLonginApi({ code }).then((res) => {
        if (res.data.code === 0) {
          // 请求成功
          // 弹出提示
          this.$store.dispatch("asyncclosetoast", {
            content: "登录成功",
            icon: "success",
          });
          // 存储token值
          localStorage.setItem("x-auth-token", res.data["x-auth-token"]);
          // 更新header组件
          this.$emit("updateKeyFn");
          // 清除地址栏中的code
          this.$router.push(this.$route.path);
        } else if (res.data.code === 400) {
          // 页面/二维码过期
          this.$store.dispatch("asyncclosetoast", {
            content: "页面/二维码过期",
            icon: "danger",
          });
          // 重新打开登录模态框
          this.$store.commit("changeOpenLogin", true);
        } else if (res.data.code === 407) {
          // 需要手机验证码登录
          this.$store.dispatch("asyncclosetoast", {
            content: "请使用手机号登录来绑定微信",
            icon: "danger",
          });
          // 重新打开登录框
          this.$store.commit("changeOpenLogin", true);
          // 临死存储uuid
          sessionStorage.setItem("uuid", res.data.uuid);
        } else {
          // 报错
        }
      });
    }
    // 获取用户信息
    UserInfoApi().then((res) => {
      if (res.data.code === 0) {
        console.log(res);
        let { userInfo } = res.data.data;
        this.userInfo = userInfo;
        this.isLogin = true;
      }
    });
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
header {
  background: @black;
  height: 40px;
  color: #fffefe;
  font-size: 14px;
  .header_in {
    align-items: center;
    height: 40px;
    ul {
      display: flex;
      height: 40px;
      align-items: center;
      cursor: pointer;
      li {
        margin-right: 20px;
        &.avatar_li {
          display: flex;
          align-items: center;
          .avatar {
            border-radius: 50%;
          }
        }
        &.header_btn {
          width: 124px;
          height: 40px;
          background-color: @blue;
          cursor: pointer;
        }
        &.login_btn {
          text-align: center;
          line-height: 40px;
        }
        &.car_btn {
          display: flex;
          align-items: center;
          justify-content: center;
          span {
            margin-left: 8px;
            margin-right: 6px;
          }
          b {
            width: 22px;
            height: 22px;
            background-color: @orange;
            border-radius: 11px;
            text-align: center;
            line-height: 22px;
          }
        }
      }
    }
  }
}
</style>